---
title: useStyles
---
import { Card } from '@astrojs/starlight/components'
import Seo from '../../../components/Seo.astro'
import Badge from '../../../components/Badge.astro'

<Seo
    seo={{
        title: 'useStyles',
        description: 'How to use useStyles hook from react-native-unistyles'
    }}
>

<Badge label="All platforms" />
<Badge label="2.0.0" />

Hook that ties everything together and handles the heavy lifting.

<Card>
Without `useStyles`, you can't utilize features like:
    - breakpoints
    - media queries
    - themes
    - variants
</Card>

It can be imported from the `react-native-unistyles`:

```ts
import { useStyles } from 'react-native-unistyles'
```

`useStyles` accepts two optional arguments: `stylesheet` and `variants`.

To learn more about variants follow [this guide](/reference/variants/).

### Basic usage (no arguments)

If you need to access your `theme` or the current `breakpoint` in your component you can call `useStyles` without any arguments.

```tsx
const { theme, breakpoint } = useStyles()
```

### Basic usage (stylesheet)

For more advanced usage, pass your `stylesheet` generated with [createStyleSheet](/reference/create-stylesheet/):

```tsx
// you can still access theme and current breakpoint
const { styles, theme, breakpoint } = useStyles(stylesheet)
```

The `styles` returned are compatible with any React Native component and satisfy the TypeScript type requirements.

### Basic usage (breakpoint)

If you haven't registered your breakpoints with `UnistylesRegistry` it will be always `undefined`.
Otherwise it's will be defined string like `sm`, `md` or `xl`.

With  `breakpoint` you can manipulate the JSX to hide or show some components:

```tsx /breakpoint/
export const Example = () => {
  const { styles, breakpoint } = useStyles(stylesheet)

  return (
    <View style={styles.container}>
        <Hidden
            from="xs"
            to="md"
            breakpoint={breakpoint}
        >
          <MobileSidebar />
        </Hidden>
        <Visible
          from="md"
          breakpoint={breakpoint}
        >
          <WebSidebar />
        </Hidden>
    </View>
  )
}
```


:::caution
Unistyles has no `Hidden` and `Visible` components. It's just an idea to show you what can you achieve.
:::


### Basic usage (theme)


Sometimes, you may need to access your `theme` values outside of the stylesheet. 
An example of this could be when working with a built-in React Native Button component.

```tsx /theme/
import React from 'react'
import { Button } from 'react-native'
import { useStyles } from 'react-native-unistyles'

export const Example = () => {
  const { theme } = useStyles()

  return (
    <Button
        color={theme.colors.accent}
        title="Click me"
        onPress={() => {}}
    />
  )
}
```

:::tip[Advanced usage]
For more advanced usage follow the next guides.
:::

</Seo>
